<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Pagination 分页</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<script src="../static/js/zh-cn.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
<style type="text/css">

</style>
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">设置layout，表示需要显示的内容，用逗号分隔，布局元素会依次显示。 prev表示上一页，next为下一页，pager表示页码列表，除此以外还提供了jumper和total，size和特殊的布局符号->，->后的元素会靠右显示，jumper表示跳页元素，total表示总条目数，size用于设置每页显示的页码数量。</p>
	<div class="example-pagination-block">
		<div class="example-demonstration">当只有几页的时候：</div>
		<el-pagination layout="prev, pager, next" :total="50"></el-pagination>
	</div>
	<div class="example-pagination-block">
		<div class="example-demonstration">当超过7页的时候：</div>
		<el-pagination layout="prev, pager, next" :total="1000"></el-pagination>
	</div>
	
	<el-divider content-position="left">设置最大页码按钮数</el-divider><!-- =============================================================== -->
	<p class="desc">默认情况下，当总页数超过 7 页时，Pagination 会折叠多余的页码按钮。 通过 pager-count 属性可以设置最大页码按钮数</p>
	<el-pagination :page-size="20" :pager-count="11" layout="prev, pager, next" :total="1000"></el-pagination>
	
	<el-divider content-position="left">带有背景色的分页</el-divider><!-- =============================================================== -->
	<p class="desc">设置background属性可以为分页按钮添加背景色。</p>
	<el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
	
	<el-divider content-position="left">小型分页</el-divider><!-- =============================================================== -->
	<p class="desc">在空间有限的情况下，可以使用简单的小型分页。</p>
	<p class="desc">只需要设置 small 属性为 true 即可让分页变小</p>
	<el-pagination small layout="prev, pager, next" :total="50"></el-pagination>
	<el-pagination small background layout="prev, pager, next" :total="50" class="mt-4"></el-pagination>
	
	<el-divider content-position="left">当只有一页时隐藏分页</el-divider><!-- =============================================================== -->
	<p class="desc">当只有一页时，通过设置 hide-on-single-page 属性来隐藏分页</p>
	<div>
		<el-switch v-model="value"></el-switch>
		<el-divider></el-divider>
		<el-pagination :hide-on-single-page="value" :total="5" layout="prev, pager, next"></el-pagination>
	</div>
	
	<el-divider content-position="left">附加功能</el-divider><!-- =============================================================== -->
	<p class="desc">根据场景需要，可以添加其他功能模块。</p>
	<p class="desc">此示例是一个完整的用例。 使用了 size-change 和 current-change 事件来处理页码大小和当前页变动时候触发的事件。 page-sizes接受一个整数类型的数组，数组元素为展示的选择每页显示个数的选项，[100, 200, 300, 400] 表示四个选项，每页显示 100 个，200 个，300 个或者 400 个。</p>
	<div class="flex items-center mb-4">
		<el-radio-group v-model="small" class="mr-4">
			<el-radio-button :label="false">default</el-radio-button>
			<el-radio-button :label="true">small</el-radio-button>
		</el-radio-group>
		<div>
			background：<el-switch v-model="background" class="ml-2"></el-switch>
		</div>
		<div class="ml-4">
			disabled：<el-switch v-model="disabled" class="ml-2"></el-switch>
		</div>
	</div>
	<hr style="border: none; border-bottom: 1px solid #E6E6E6;"/>
	<div class="demo-pagination-block">
		<div class="demonstration">总项数：</div>
		<el-pagination v-model:current-page="currentPage1" :page-size="10" :small="small" :disabled="disabled"
			:background="background" layout="total, prev, pager, next" :total="1000" @size-change="handleSizeChange"
			@current-change="handleCurrentChange"></el-pagination>
	</div>
	<div class="demo-pagination-block">
		<div class="demonstration">改变每页数据量：</div>
		<el-pagination v-model:current-page="currentPage2" v-model:page-size="pageSize2" :page-sizes="[10, 15, 20, 30, 50, 100, 200, 300, 500]"
			:small="small" :disabled="disabled" :background="background" layout="sizes, prev, pager, next" :total="1000"
			@size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
	</div>
	<div class="demo-pagination-block">
		<div class="demonstration">跳转到：</div>
		<el-pagination v-model:current-page="currentPage3" v-model:page-size="pageSize3" :small="small" :disabled="disabled"
			:background="background" layout="prev, pager, next, jumper" :total="1000" @size-change="handleSizeChange"
			@current-change="handleCurrentChange"></el-pagination>
	</div>
	<div class="demo-pagination-block">
		<div class="demonstration">所有组件：</div>
		<el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[10, 15, 20, 30, 50, 100, 200, 300, 500]"
			:small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
			:total="1000" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
	</div>
</div>

</body>
<script>
const Main = {
	data() {
		return {
			message: 'Hello Vue!!',
			value: false,
			
			currentPage1: 5,
			currentPage2: 5,
			currentPage3: 5,
			currentPage4: 4,
			pageSize2: 10,
			pageSize3: 10,
			pageSize4: 10,
			small: false,
			background: true,
			disabled: false,
		}
	},
	methods:{
		handleSizeChange(val){
			console.log(`每页 ${val} 条`)
		},
		handleCurrentChange(val){
			console.log(`当前页: ${val}`)
		},
		//WARNING
		//以上事件不推荐使用（但由于兼容的原因仍然支持，在以后的版本中将会被删除）；
		//如果要监听 current-page 和 page-size 的改变，使用 v-model 双向绑定是个更好的选择。用下面的watch来监听绑定值的变化
	},
	watch:{
		currentPage1: function(value){
			console.log("currentPage1：" + value);
		},
		currentPage3: function(value){
			console.log("currentPage3：" + value);
		},
		currentPage4: function(value){
			console.log("currentPage4：" + value);
		},
		pageSize2: function(value){
			console.log("pageSize2：" + value);
		},
		pageSize4: function(value){
			console.log("pageSize4：" + value);
		}
	}
}

const app = Vue.createApp(Main);
// app.use(ElementPlus);
app.use(ElementPlus, {locale: ElementPlusLocaleZhCn,})
app.mount("#app");

</script>
</html>